<template>
	<view 
		class="ker_goback" 
		:class="isActiveSty? 'show_ani': 'hide_ani'"
		@tap="toTopClick" 
		:style="{'width': styTarget.width, 'height': styTarget.height, 'borderRadius': styTarget.borderRadius, 'bottom': styTarget.bottom, 'right': styTarget.right, 'background': styTarget.background}" 
		v-if="show"
	>
		<view class="go_top_icon" v-if="isIcon"></view>
		<slot v-else />
	</view>
</template>

<script>
	/*
	 * popup 返回顶部
	 * @description 点击返回顶部功能
	 * @property {Number} setScrollTop 设置的滚动距离，即返回顶部按钮出现的距离
	 * @property {Boolean} isIcon 是否使用默认的icon，默认为是
	 * @property {Object}  styObj 	样式
	 * @event {Function} toTopClick 点击返回顶部按钮触发
	*/
	export default {
		name: "kerGotop",
		props:{
			//设置的滚动距离，即返回顶部出现的距离
			setScrollTop: {
				type: Number,
				default: 100
			},
			// 是否使用默认icon
			isIcon: {
				type: Boolean,
				default: true,
			},
			//默认样式
			styObj: {
				type: Object,
				default() {
					return {}
				}
			}
		},
		data() {
			return {
				show: false,  //显隐布尔值
				isActiveSty: false,  //样式布尔值
				styTarget: {
					width: '90rpx',
					height: '90rpx',
					borderRadius: '100%',
					bottom: '40%',
					right: '0',
					background: 'rgba(0,0,0,0.4)'
				}
			}
		},
		watch: {
			styObj: {
				immediate: true,
				handler(e) {
					this.styTarget = Object.assign(this.styTarget, this.styObj)
				}
			}
			
		},
		methods: {
			init(top) {
				clearTimeout(this.timer);
				if (top > this.setScrollTop) {
					this.show = true;
					this.isActiveSty = true;
				} else {
					this.isActiveSty = false;
					this.timer = setTimeout(() =>{
						this.show = false
					},200)
				}
			},
			//返回顶部
			toTopClick() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 200
				});	
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "../common/common.scss";
	.ker_goback{
		position: fixed;
		z-index: 10;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		.go_top_icon{
			width: 48rpx;
			height: 48rpx;
			background: $goTopIcon;
			background-size: contain;
		}
	}
	.show_ani{
		animation: scaleAni 0.2s ease-in forwards;
	}
	.hide_ani{
		animation: hideAni 0.2s ease-in forwards;
	}
	@keyframes  scaleAni{
		0%{
			transform: scale(0.0);
		}
		25%{
				transform: scale(0.2);
		}
		50%{
				transform: scale(0.5);
		}
		70%{
				transform: scale(0.7);
		}
		90%{
				transform: scale(0.9);
		}
		100% {
			transform: scale(1);
		}
	}
	@keyframes  hideAni{
		0%{
			transform: scale(1);
		}
		25%{
			transform: scale(0.9);
		}
		50%{
			transform: scale(0.7);
		}
		70%{
			transform: scale(0.5);;
		}
		90%{
			transform: scale(0.2);
		}
		100% {
			transform: scale(0);
		}
	}
</style>
